<template>
  <ul class="star-box">
    <li
      v-for="d in 5"
      :key="d"
      :class="{'active':d <= star,disabled}"
      @click="$emit('change',d)"
    >

    </li>
  </ul>
</template>

<script>
//传值:数字/评分 1-5整数
//!不要直接改props！
//发送数据,将数据传给父组件:点击哪颗星星,就将对应的数字发送出去
  export default {
    props:{
      //自定义属性类型
      // Number、String、Boolean、Array、Object、Function
      // star:Number
      //用default指定默认值
      // 用required指定必填
      star:{
        type:Number,
        // default: 3,
        required: true
      },
      //布尔类型,可以不传,默认值是false
      disabled:{
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="sass" scoped>
.star-box
  display: inline-flex
  width: 150px
  height: 30px
  li
    flex: 1
    // Vue项目中路径使用@表示src目录,如果在样式中使用@,前面还需要加~
    //@是webpack中定义的别名
    background: url(~@/assets/src-img/heart-line.png) no-repeat
    background-size: cover
    &.active
      background-image: url(~@/assets/src-img/heart-fill.png)
    &.disabled
      opacity: .6
      cursor: not-allowed
</style>
